<template>
  <view class="minePage">
    <view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>

    <!-- 个人信息 -->
    <view class="avatarVue margin0 flex-between align-center" v-if="isLogin">
      <view class="flex align-center">
        <image
          src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/avatar-man.png"
          style="width: 82rpx; height: 82rpx; border-radius: 50%"
        ></image>
        <view class="flex-column flex-between">
          <text class="name" v-if="user.phone">{{
            user.phone | conceal()
          }}</text>
          <text class="name" v-else>{{ user.username }}</text>
        </view>
      </view>
    </view>
    <view class="avatarVue margin0 flex-between align-center" v-else>
      <view class="flex align-center" @click="$tools.route('../login/login')">
        <image
          src="../../static/user.png"
          style="width: 82rpx; height: 82rpx; border-radius: 50%"
        ></image>
        <text class="name">登录</text>
      </view>
    </view>
    <u-gap height="30"></u-gap>

    <!-- 我的会员 -->
    <view class="vipVue margin0" v-if="isLogin">
      <view class="label">我的会员</view>
      <view class="flex-between align-center margin20">
        <text>当前会员</text>
        <text style="color: #f7c878">{{
          user.membershipName ? user.membershipName : "基础会员"
        }}</text>
      </view>
      <view class="button-vip-invite">
        <view class="btn margin30" @click="$tools.navigate('./vip')"
          >购买会员</view
        >
      </view>
    </view>

    <!-- 我的邀请 -->
    <!--		<view class="vipVue margin30" v-if="isLogin">-->
    <!--			<view class="label">我的邀请</view>-->
    <!--			<view class="flex-between align-center margin20">-->
    <!--				<text>当前邀请人数</text>-->
    <!--				<text style="color: #F7C878;">100</text>-->
    <!--			</view>-->
    <!--			<view class="button-vip-invite">-->
    <!--				 <view class="btn margin30" @click="$tools.navigate('./invite')">邀请详情</view>-->
    <!--			</view>-->
    <!--		</view>-->

    <!-- 积分管理 -->
    <view class="pointVue margin30">
      <view class="label">积分管理</view>
      <view class="flex-between margin20">
        <view class="info flex-column flex-between">
          <text style="color: #333">AI视频</text>
          <text style="color: #f8c329; font-weight: 600; font-size: 30rpx">{{
            isLogin ? aiVideoPoints : 0
          }}</text>
        </view>
        <view class="info flex-column flex-between">
          <text style="color: #333">AI微信</text>
          <text style="color: #f8c329; font-weight: 600; font-size: 30rpx">{{
            isLogin ? aiWechatPoints : 0
          }}</text>
        </view>
      </view>
      <view class="flex-between margin20">
        <view class="li" @click="$tools.navigate('./charge')">积分充值</view>
        <view class="li" @click="$tools.navigate('./record')">积分记录</view>
      </view>
    </view>

    <!-- 兑换码 -->
    <view class="exchangeVue margin30" v-if="isLogin">
      <view class="flex-between">
        <view class="label">兑换码</view>
        <text
          style="color: #f7c878; text-decoration: underline; font-size: 26rpx"
          @click="$tools.navigate('./exchange')"
          >兑换管理</text
        >
      </view>
      <view class="flex margin20 align-center">
        <input type="text" placeholder="请输入兑换码" v-model="code" />
        <view class="btn" @click="getRedemptionCode()">兑换</view>
      </view>
    </view>

    <!-- 我的管理 -->
    <view class="myManageVue margin30">
      <view
        class="li flex-between align-center"
        @click="$tools.navigate('./myVideo')"
      >
        <text>我的视频管理</text>
        <image
          src="../../static/more.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
      <view
        class="li flex-between align-center"
        @click="$tools.navigate('./myVoice')"
      >
        <text>我的声音管理</text>
        <image
          src="../../static/more.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
      <view
        class="li flex-between align-center noBorder"
        @click="$tools.navigate('./setup')"
      >
        <text>设置</text>
        <image
          src="../../static/more.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
    </view>
    <u-gap height="30"></u-gap>
  </view>
</template>

<script>
import { mapState } from "vuex";
import WxLogin from "../../components/wxLogin.vue";

export default {
  components: {
    WxLogin,
  },
  data() {
    return {
      aiVideoPoints: 0,
      aiWechatPoints: 0,
      code: "",
      safeTop: 0,
      statusBarHeight: 0,
    };
  },

  computed: {
    ...mapState({
      isLogin: (state) => state.isLogin,
      user: (state) => state.user,
    }),
  },

  onLoad() {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res);
        that.statusBarHeight = that.$utils.pxTorpx(res.statusBarHeight);
      },
    });
  },
  async onShow() {
    await this.getPoint();
  },
  methods: {
    // 获取积分
    async getPoint() {
      const res = await this.$request(
        "/aiet-user-center/user/points/summary",
        {},
        "GET"
      );
      if (res.code === 200) {
        this.aiVideoPoints = res.data.aiVideoPoints;
        this.aiWechatPoints = res.data.aiWechatPoints;
        console.log(
          "这是积分：视频-微信",
          this.aiVideoPoints,
          this.aiWechatPoints
        );
      }
    },

    // 使用兑换码
    async getPoint() {
      const res = await this.$request(
        "/aiet-user-center/user/points/summary",
        {},
        "GET"
      );
      if (res.code === 200) {
        this.aiVideoPoints = res.data.aiVideoPoints;
        this.aiWechatPoints = res.data.aiWechatPoints;
        console.log(
          "这是积分：视频-微信",
          this.aiVideoPoints,
          this.aiWechatPoints
        );
      }
    },

    // 使用兑换码
    async getRedemptionCode() {
      if (!this.user.phone) {
        this.$u.toast("请先绑定手机号");
        setTimeout(() => {
          this.$tools.route("./setup");
        }, 1000);
        return;
      }
      if (!this.code) return this.$u.toast("兑换码不能为空");
      uni.showLoading();
      try {
        const res = await this.$request(
          "/aiet-user-center/user/redemptionCode/update",
          {
            code: this.code,
            used: true,
            usedId: this.user.id,
          },
          "PUT"
        );
        if (res.code === 200) {
          uni.hideLoading();
          this.code = "";
          this.getPoint();
          this.$u.toast("兑换成功");
        } else {
          uni.hideLoading();
          this.$u.toast(res.msg);
        }
      } catch (error) {
        uni.hideLoading();
        if (error.statusCode === 500) {
          this.$u.toast("该兑换码不存在");
        } else {
          this.$u.toast("兑换失败，请稍后再试");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.minePage {
  width: 100%;
  height: 100%;

  .safeVue {
    width: 100%;
    height: var(--status-bar-height);
    background: #f8c329;
  }

  .avatarVue {
    width: 100%;
    background: #f8c329;
    padding: 0 30rpx 20rpx;

    .name {
      color: #333;
      font-weight: 600;
      padding-left: 15rpx;
      line-height: 1;
    }
  }

  .logouBtn {
    width: 520rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background: #f8c329;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
  }

  .vipVue {
    width: 690rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      font-weight: 700;
      font-size: 30rpx;
      color: #000;
    }

    .btn {
      width: 100%;
      height: 78rpx;
      background: #f8c329;
      text-align: center;
      line-height: 78rpx;
      color: #fff;
      border-radius: 20rpx;
    }
  }

  .pointVue {
    width: 690rpx;
    border-radius: 12rpx;
    background: #fff;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      color: #000;
      font-weight: 600;
    }

    .info {
      width: 300rpx;
      height: 150rpx;
      background: linear-gradient(90deg, #ffebb1 0%, #fef2e2 100%);
      border-radius: 12rpx;
      padding: 30rpx;
    }

    .info:nth-child(2) {
      background: linear-gradient(90deg, #ffebb1 0%, #fef2e2 100%);
    }

    .li {
      width: 300rpx;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      color: #fff;
      background: #f8c329;
      border-radius: 10rpx;
    }

    .li:nth-child(2) {
      color: #fff;
      background: #f8c329;
    }
  }

  .exchangeVue {
    width: 690rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      font-weight: 700;
      font-size: 30rpx;
      color: #000;
    }

    input {
      flex: 1;
      height: 80rpx;
      border: 1rpx solid #f5f5f5;
      border-radius: 12rpx;
      padding-left: 20rpx;
      font-size: 28rpx;
    }

    .btn {
      width: 100rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      background: #f8c329;
      border-radius: 12rpx;
      margin-left: 30rpx;
    }
  }

  .myManageVue {
    width: 690rpx;
    border-radius: 12rpx;
    background: #fff;
    padding: 0 20rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      color: #000;
      font-weight: 600;
    }

    .li {
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #f5f5f5;

      text {
        color: #333;
      }
    }

    .noBorder {
      border: none;
    }
  }
}
</style>
